import React,{useState,useEffect} from 'react'
import {List,Row,Col,Modal,message,Button} from 'antd'
import axios from 'axios'
import servicePage from '../config/apiUrl'
import { use } from 'marked'
import '../static/css/ArticleList.css'
const {confirm} =Modal
function ArticleList(props){
    const[list,setList] = useState([])
    useEffect(()=>{
        getList()
    },[])
    const getList=()=>{
        axios({
            method:'get',
            url:servicePage.getArticleList,
            withCredentials:true
        }).then(
            res=>{
                setList(res.data.list)
            }
        )
    }
    const deleteArticle=(id)=>{
        confirm({
            title:"确认删除这篇文章？",
            content:'如果点击OK按钮，文章将永远删除！无法恢复',
            onOk(){
                axios({
                    method:'get',
                    url:servicePage.deleteArticle+id,
                    withCredentials:true
                }).then(
                    res=>{
                        message.success('文章删除成功')
                        getList()
                    }
                )
            },
            okCancel(){
                message.success('好吧，你选择取消删除')
            }
        })

    }
    const updateArticle = (id)=>{
        props.history.push('/AdminIndex/update/'+id)
    }

    return (
        <div>
            <List
            header={
                <Row className='list-div'>
                    <Col span={8}>
                        <b>文章标题</b>
                    </Col>
                    <Col span={4}>
                        <b>文章类型</b>
                    </Col>
                    <Col span={4}>
                        <b>添加时间</b>
                    </Col>
                    <Col span={4}>
                        <b>浏览次数</b>
                    </Col>
                    <Col span={4}>
                        <b>操作</b>
                    </Col>
                </Row>
            }
            bordered 
            dataSource={list}
            renderItem={item=>(
                <List.Item>
                    <Col span={8}>
                        <b>{item.title}</b>
                    </Col>
                    <Col span={4}>
                        {item.typeName}
                    </Col>
                    <Col span={4}>
                        {item.addTime}
                    </Col>
                    <Col span={4}>
                        {item.view_count}
                    </Col>
                    <Row gutter={[6,1]}>
                        <Col span={12}>
                            <Button className='update-button'  type='primary' onClick={()=>updateArticle(item.id)}>修改</Button>
                        </Col>
                        <Col span={12}>
                            <Button className='delete-button'  onClick={()=>deleteArticle(item.id)}>删除</Button>
                        </Col>
                    </Row>

                </List.Item>
            )}
            >

            </List>
        </div>
    )
}
 export default ArticleList